<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!Doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>用户</title>
	<%@include file="/common/header.jsp" %>
</head>
<body class="layui-layout-body">

<div class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo">欢迎来到校园二手交易市场</div>
		<%@include file="/common/top.jsp" %>
	</div>
	<%@include file="/common/user_left.jsp" %>


	<div class="layui-body">
	<form class="layui-form">
		<blockquote class="layui-elem-quote quoteBox">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
						<input type="text" class="layui-input searchVal" placeholder="请输入搜索的内容" />
					</div>
					<a class="layui-btn search_btn" data-type="reload">搜索</a>
				</div>
			</form>
		</blockquote>

		<table id="commodityList" lay-filter="commodityList"></table>
		<!--操作-->
		<script type="text/html" id="commodityListBar">
			<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="buy">购买</a>
		</script>
	</form>
	</div>
</div>


<script>
//JavaScript代码区域
layui.use(['form','layer','laydate','table','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laydate = layui.laydate,
        laytpl = layui.laytpl,
        table = layui.table;

    //新闻列表
    var tableIns = table.render({
        elem: '#commodityList',
        url : '/commodity/list.json',
        method:"POST",
        cellMinWidth : 95,
        page : true,
        height : "full-105",
        limit : 20,
        limits : [10,15,20,25],
        id : "commodityListTable",
        cols : [[
//<th lay-data="{field:'comName',width:80}">商品名称</th>
//    <th lay-data="{field:'comType',width:80}">商品类型</th>
//    <th lay-data="{field:'comIntroduce',width:160}">商品描述</th>
//    <th lay-data="{field:'username',width:80}">用户名</th>
//    <th lay-data="{field:'phone',width:160}">联系方式</th>
//    <th lay-data="{field:'comPrice',width:80}">商品价格</th>
//    <th lay-data="{field:'pubDate',width:80}">发布日期</th>
//    <th lay-data="{field:'transDate',width:80}">交易日期</th>
            {field: 'comName', title: '商品名称',templet:function(data){
                return '<span class="layui-blue">'+data.comName+'</span>';
            }},
            {field: 'comType', title: '商品类型', align:'center'},
            {field: 'comIntroduce', title: '商品描述', align:'center'},
            {field: 'username', title: '用户名', align:'center'},
            {field: 'phone', title: '联系方式', align:'center'},
            {field: 'comPrice', title: '商品价格', align:'center'},
            {field: 'cDate', title: '发布日期', align:'center',templet:function(data){
                return timestampToTime(data.cDate);
            }},
            {field: 'isBuy', title: '状态',  align:'center',templet:function(d){
                return d.buy == true ? "<span class='layui-blue'>已被购买</span>" : "<span class='layui-red'>未被购买</span>";
            }},
            {title: '操作', templet:'#commodityListBar',align:"center"}
        ]]
    });

    $(".search_btn").on("click",function(){
            table.reload("commodityListTable",{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where: {
                    key: $(".searchVal").val()  //搜索的关键字
                }
            })
    });
    //列表操作
    table.on('tool(commodityList)', function(obj){
        var layEvent = obj.event,
            data = obj.data;
        if(layEvent === 'edit'){ //编辑
            addNews(data);
        } else if(layEvent === 'buy'){ //删除
			if(data.buy==true){
                layer.msg("该商品已被人购买~",{time:1000});
            }
            else if("${currentUser.coin}">=data.comPrice){
                layer.confirm('确定花费'+data.comPrice+'coins购买【'+data.comName+'】？',{icon:3, title:'提示信息'},function(index){
                    $.post("/user/buy",{
                        id : data.id
                    },function(data){
                        if(data.status==200){
                            layer.close(index);
                            layer.msg(data.msg,{time:1000});
                            setTimeout(function(){
                                window.location.reload();
                            },1000)
                        }else {
                            layer.close(index);
                            layer.msg(data.msg, {icon: 16, time: 1000, shade: 0.8});
                        }
                    })
                });
            }else{
                layer.msg("您的coins只有【'${currentUser.coin}'】不足以购买【"+data.comName+"】!",{time:1000});
            }
        }
    });
})
function timestampToTime(timestamp) {
    var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    Y = date.getFullYear() + '-';
    M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    D = date.getDate()<10?('0'+date.getDate()):(date.getDate())+ ' ';
    h = date.getHours()<10?('0'+date.getHours()):(date.getHours()) + ':';
    m = date.getMinutes()<10?('0'+date.getMinutes()):(date.getMinutes()) + ':';
    s = date.getSeconds()<10?('0'+date.getSeconds()):(date.getSeconds());
    return Y+M+D;
}
</script>

</body>
</html>